<template>
  <view class="dynamic-page">
    <!-- 顶部导航标签 -->
    <view class="nav-bar">
      <view class="nav-item" :class="{ active: currentTab === 'all' }" @click="currentTab = 'all'">全部动态</view>
      <view class="nav-item" :class="{ active: currentTab === 'my' }" @click="currentTab = 'my'">我的发布</view>
      <view class="nav-item" :class="{ active: currentTab === 'follow' }" @click="currentTab = 'follow'">关注动态</view>
    </view>

    <!-- 全部动态内容 -->
    <view class="tab-content" v-if="currentTab === 'all'">
      <view class="dynamic-list">
        <!-- 动态项1：用户分享 -->
		<!-- 动态项3：官方话题 -->
		<view class="dynamic-item official">
		  <view class="user-info">
		    <image class="avatar" src="/static/bottom/active.png" mode="cover"></image>
		    <view class="user-name">声绪官方</view>
		    <view class="post-time">3天前</view>
		  </view>
		  <view class="dynamic-content">
		    <view class="topic-tag">#7天放松挑战#</view>
		    <view class="content-text">参与挑战，每天用声绪音频记录你的放松时刻，坚持7天即可获得「深度放松」专属音频包！</view>
		    <image class="content-img" src="/static/bottom/hotSelect.png" mode="aspectFill"></image>
		  </view>
		  <view class="interaction-bar">
		    <view class="interact-item">
		      <p style="color: red;">♥</p>
		      <text>156</text>
		    </view>
		    <view class="interact-item">
		     <image src="/static/bottom/myhomeSelect.png" mode="aspectFit"></image>
		      <text>32</text>
		    </view>
		    <view class="interact-item">
		      <u-icon name="share-square"></u-icon>  
		      <text>分享</text>
		    </view>
		  </view>
		</view>
        <view class="dynamic-item">
          <view class="user-info">
            <image class="avatar" src="/static/bottom/hotSelect.png" mode="cover"></image>
            <view class="user-name">治愈系听众</view>
            <view class="post-time">2小时前</view>
          </view>
          <view class="dynamic-content">
            <view class="content-text">听了「图书馆专注背景音」后，终于把拖欠的报告写完了！这种沉浸式的背景音太绝了～</view>
            <image class="content-img" src="/static/bottom/hotSelect.png" mode="aspectFill"></image>
          </view>
          <view class="interaction-bar">
            <view class="interact-item">
               <p style="color: red;">♥</p>
              <text>28</text>
            </view>
            <view class="interact-item">
              <image src="/static/bottom/myhomeSelect.png" mode="aspectFit"></image>
              <text>5</text>
            </view>
            <view class="interact-item">
             <u-icon name="share-square"></u-icon>  
              <text>分享</text>
            </view>
          </view>
        </view>

        <!-- 动态项2：用户提问 -->
        <view class="dynamic-item">
          <view class="user-info">
            <image class="avatar" src="/static/bottom/hotSelect.png" mode="cover"></image>
            <view class="user-name">焦虑打工人</view>
            <view class="post-time">昨天</view>
          </view>
          <view class="dynamic-content">
            <view class="content-text">有没有能快速缓解职场焦虑的背景音？每次加班都快崩溃了😩</view>
          </view>
          <view class="interaction-bar">
            <view class="interact-item">
              <p style="color: red;">♥</p>
              <text>42</text>
            </view>
            <view class="interact-item">
             <image src="/static/bottom/myhomeSelect.png" mode="aspectFit"></image>
              <text>12</text>
            </view>
            <view class="interact-item">
              <u-icon name="share-square"></u-icon>  
              <text>分享</text>
            </view>
          </view>
        </view>

     
      </view>
    </view>

    <!-- 我的发布内容 -->
    <view class="tab-content" v-else-if="currentTab === 'my'">
      <view class="empty-state" v-if="myDynamicList.length === 0">
        <image src="/static/bottom/hotSelect.png" mode="aspectFit" class="empty-img"></image>
        <text class="empty-text">你还没有发布过动态哦</text>
        <button class="publish-btn" @click="goPublish">发布第一条动态</button>
      </view>
      <view class="dynamic-list" v-else>
        <view class="dynamic-item" v-for="(item, index) in myDynamicList" :key="index">
          <view class="user-info">
            <image class="avatar" src="/static/bottom/hotSelect.png" mode="cover"></image>
            <view class="user-name">我的账号</view>
            <view class="post-time">{{ item.postTime }}</view>
          </view>
          <view class="dynamic-content">
            <view class="content-text">{{ item.content }}</view>
            <image class="content-img" src="/static/bottom/hotSelect.png" mode="aspectFill" v-if="item.hasImage"></image>
          </view>
          <view class="interaction-bar">
            <view class="interact-item" @click="handleLike(item.id)">
               <p style="color: red;">♥</p>
              <text>{{ item.likeCount }}</text>
            </view>
            <view class="interact-item" @click="handleComment(item.id)">
             <image src="/static/bottom/myhomeSelect.png" mode="aspectFit"></image>
              <text>{{ item.commentCount }}</text>
            </view>
            <view class="interact-item">
			<u-icon name="share-square"></u-icon>  
              <text>分享</text>
            </view>
            <view class="interact-item more-op" @click="showMoreOp(item.id)">
              <image src="/static/icons/more.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 关注动态内容 -->
    <view class="tab-content" v-else-if="currentTab === 'follow'">
      <view class="empty-state" v-if="followList.length === 0">
        <image src="/static/bottom/hotSelect.png" mode="aspectFit" class="empty-img"></image>
        <text class="empty-text">还没有关注的用户</text>
        <button class="find-btn" @click="goFindUser">去发现有趣的人</button>
      </view>
      <view class="follow-list" v-else>
        <view class="follow-user-section" v-for="(user, uIndex) in followList" :key="uIndex">
          <view class="user-header">
            <image class="user-avatar" src="/static/bottom/hotSelect.png" mode="cover"></image>
            <view class="user-name">{{ user.name }}</view>
          </view>
          <view class="user-dynamics">
            <view class="dynamic-item" v-for="(dynamic, dIndex) in user.dynamics" :key="dIndex">
              <view class="dynamic-content">
                <view class="content-text">{{ dynamic.content }}</view>
                <image class="content-img" src="/static/bottom/hotSelect.png" mode="aspectFill" v-if="dynamic.hasImage"></image>
              </view>
              <view class="dynamic-meta">
                <view class="post-time">{{ dynamic.postTime }}</view>
                <view class="interaction">
                  <view class="interact-item" @click="handleLike(user.id, dynamic.id)">
                     <p style="color: red;">♥</p>
                    <text>{{ dynamic.likeCount }}</text>
                  </view>
                  <view class="interact-item" @click="handleComment(user.id, dynamic.id)">
                   <image src="/static/bottom/myhomeSelect.png" mode="aspectFit"></image>
                    <text>{{ dynamic.commentCount }}</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 发布动态按钮 -->
    <view class="publish-btn" @click="goPublish" v-if="currentTab !== 'follow'">
      <P style="font-size: 30px; color: aliceblue; text-align: center;align-items: center;">+</P>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'all', // 默认选中“全部动态”
      myDynamicList: [
        {
          id: 1,
          postTime: "今天 14:30",
          content: "尝试了新的雨声背景音，配合雨声配上远处的雷声，太助眠了！昨晚终于睡了个好觉～",
          hasImage: true,
          likeCount: 15,
          commentCount: 3
        },
        {
          id: 2,
          postTime: "3天前",
          content: "有没有人跟我一样，听着咖啡馆背景音工作效率会翻倍？推荐给所有拖延症朋友！",
          hasImage: false,
          likeCount: 8,
          commentCount: 2
        }
      ],
      followList: [
        {
          id: 1,
          name: "冥想导师Lily",
          dynamics: [
            {
              id: 101,
              content: "今日冥想引导：专注呼吸5分钟，感受腹部的起伏，让杂念随呼气排出...（附音频）",
              hasImage: true,
              postTime: "1小时前",
              likeCount: 68,
              commentCount: 12
            }
          ]
        },
        {
          id: 2,
          name: "自然声音收集者",
          dynamics: [
            {
              id: 201,
              content: "凌晨4点录制的森林鸟鸣，包含3种稀有鸟类的叫声，适合清晨唤醒身心～",
              hasImage: true,
              postTime: "昨天 08:20",
              likeCount: 124,
              commentCount: 23
            },
            {
              id: 202,
              content: "你们喜欢带点风声的海浪，还是纯海浪声？评论区告诉我，下次优先录～",
              hasImage: false,
              postTime: "3天前",
              likeCount: 89,
              commentCount: 45
            }
          ]
        }
      ]
    };
  },
  methods: {
    goPublish() {
      uni.navigateTo({
        url: "/pages/publish/publish"
      });
    },
    handleLike(dynamicId, userId) {
      if (userId) {
        const user = this.followList.find(u => u.id === userId);
        if (user) {
          const dynamic = user.dynamics.find(d => d.id === dynamicId);
          if (dynamic) dynamic.likeCount++;
        }
      } else {
        const item = this.myDynamicList.find(item => item.id === dynamicId);
        if (item) item.likeCount++;
      }
      console.log("点赞动态：", dynamicId);
    },
    handleComment(dynamicId, userId) {
      console.log("评论动态：", dynamicId);
    },
    showMoreOp(dynamicId) {
      uni.showActionSheet({
        itemList: ["编辑动态", "删除动态"],
        success: (res) => {
          if (res.tapIndex === 0) {
            console.log("编辑动态：", dynamicId);
          } else if (res.tapIndex === 1) {
            this.myDynamicList = this.myDynamicList.filter(item => item.id !== dynamicId);
          }
        }
      });
    },
    goFindUser() {
      uni.navigateTo({
        url: "/pages/discoverUser/discoverUser"
      });
    }
  }
};
</script>

<style scoped>
.dynamic-page {
  padding-bottom: 100rpx;
  background-color: #f7f8fa;
}

.nav-bar {
  display: flex;
  height: 88rpx;
  line-height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
}

.nav-item {
  flex: 1;
  text-align: center;
  font-size: 28rpx;
  color: #666;
}

.nav-item.active {
  color: #333;
  font-weight: bold;
  border-bottom: 4rpx solid #409eff;
}

.tab-content {
  padding: 20rpx;
}

.dynamic-list {
  margin-top: 20rpx;
}

.dynamic-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.dynamic-item.official {
  border-left: 10rpx solid #409eff;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.user-name {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.post-time {
  margin-left: auto;
  font-size: 24rpx;
  color: #999;
}

.dynamic-content {
  margin-bottom: 30rpx;
}

.topic-tag {
  display: inline-block;
  padding: 6rpx 16rpx;
  background-color: #e6f7ff;
  color: #409eff;
  font-size: 24rpx;
  border-radius: 20rpx;
  margin-bottom: 16rpx;
}

.content-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.content-img {
  width: 100%;
  height: 300rpx;
  border-radius: 12rpx;
}

.interaction-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 80rpx;
  border-top: 1rpx solid #eee;
  padding-top: 20rpx;
}

.interact-item {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.interact-item image {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.more-op {
  position: relative;
}

.more-op image {
  width: 28rpx;
  height: 28rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 200rpx;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 40rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 60rpx;
}

.publish-btn {
  position: fixed;
  bottom: 100rpx;
  right: 40rpx;
  width: 80rpx;
  height:80rpx;
  background-color: #409eff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rpx 20rpx rgba(64, 158, 255, 0.3);
}

.publish-btn image {
  width: 50rpx;
  height: 50rpx;
  filter: brightness(0) invert(1);
}

.find-btn {
  width: 280rpx;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #fff;
  color: #409eff;
  border: 1rpx solid #409eff;
  border-radius: 40rpx;
  font-size: 28rpx;
  padding: 0;
}

.follow-list {
  padding: 20rpx;
}

.follow-user-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.user-avatar {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}

.user-dynamics {}

.dynamic-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.interaction {
  display: flex;
  gap: 30rpx;
}
</style>